<template>
  <ul class="subcategory">
    <li
      v-for="cate in subcategories"
      :key="cate.id"
      is="router-link"
      :to="{name: 'list', params: {url: cate.url}}"
      tag="li"
    >
      <img :src="cate.imageUrl" />
      <span>{{ cate.title }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'subcategory',
  data () {
    return {
      subcategories: []
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.$http.getSubcategories(to.params.suibianqu)
        .then(resData => {
          vm.subcategories = resData.categories
        })
    })
  },
  beforeRouteUpdate (to, from, next) {
    this.$http.getSubcategories(to.params.suibianqu)
      .then(resData => {
        // console.log(resData)
        this.subcategories = resData.categories
      })
    next()
  },
  beforeRouteLeave (to, from, next) {
    // console.log('before route leave')
    next()
  }
}
</script>

<style lang="scss" scoped>
  .subcategory {
    padding: 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
      height: 80px;
      width: 32%;
      margin-bottom: 8px;
      text-align: center;
      margin-top: 20px;

      img {
        background: #fff;
        width: 100%;
        height: 80px;
      }
      span{
        font-size: 12px;
        color:gray;
      }
    }
  }
</style>
